<template>
  <u-modal :show="show" title="绑定分厂班组" showCancelButton @confirm="confirm" @cancel="cancel">
    <view class="slot-content">
      <u--form :model="bind" ref="uForm" labelWidth="160rpx" labelAlign="left">
        <u-form-item label="分厂:" prop="factoryName" class="u-border-bottom" @click="factoryShow = true">
          <u--input v-model="bind.factoryName" type="text" disabled disabledColor="#ffffff" placeholder="请选择分厂" border="none"></u--input>
		  <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>
        <u-form-item label="班组:" prop="teamName" class="u-border-bottom" @click="showMultiple()">
          <u--input v-model="bind.teamName" type="text" disabled disabledColor="#ffffff" placeholder="请选择班组" border="none"></u--input>
		  <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>
      </u--form>
	  
	  <u-picker 
		  :show="factoryShow" 
		  keyName="label" 
		  :columns="factoryList" 
		  :default-index="factorySelectedIndex"
		  @cancel="factoryShow = false" 
		  @confirm="factoryConfirm">
	  </u-picker>
	  <u-picker :show="teamShow" 
		  keyName="label" 
		  :columns="teamList" 
		  :default-index="teamSelectedIndex"
		  @cancel="teamShow = false" 
		  @confirm="teamConfirm">
	  </u-picker>
	  
	  <multiple-picker
	  	title="请选择班组" 
	  	:show="selectMultiple.show" 
	  	:columns="selectMultiple.columns" 
	  	:defaultIndex="selectMultiple.index" 
	  	@confirm="confirmMultiple" 
	  	@cancel="selectMultiple.show = false"
	  	@change="changeMultiple"
	  ></multiple-picker>
	  
	  <u-toast ref="uToast" />
    </view>
  </u-modal>
</template>

<script>
import * as BaseApi from '@/api/base/base';
export default {
  props: {
    show: Boolean,
	user: {
		type: Object,
		default: {},
	},
  },
  data () {
    return {
      bind: {
        factoryId: '',
        teamId: '',
		factoryName: '',
		teamName: '',
		teamNameList: [],
      },
	  factorySelectedIndex: [0],
	  teamSelectedIndex: [0],
	  factoryShow: false,
	  teamShow: false,
	  factoryList: [],
	  teamList: [],
	  
	  selectMultiple: {
			show: false,
			index: [],
			columns: [
				// {
				// 	label: '测试1',
				// 	value: "测试1",
				// },
				// {
				// 	label: '测试2',
				// 	value: "测试2",
				// },
			],
		},
    }
  },
  mounted() {
  	console.log("班组页面初始化");
	this.init();
	// this.selectMultiple.index = ["1", "2"];
  },
  methods: {
	showMultiple() {
		// TODO 明天实现
		// console.log("confirm:", this.bind.teamNameList);
		// this.selectMultiple.index = this.bind.teamNameList;
		// this.selectMultiple.show = true;
		this.teamShow = true;
	},
	handleMultiple(val) {
		console.log(val);
		this.selectMultiple.index = val || [];
		this.selectMultiple.show = true;
	},
	confirmMultiple(e) {
		console.log(e);
		let labelList = [];
		this.bind.teamNameList = [];
		e.selected.forEach(item => {
			labelList.push(item.label);
			this.bind.teamNameList.push(item.value);
		})
		// this.form.selectValue = labelList.toString();
		// this.form.selectIndex = e.value;
		this.bind.teamName = labelList.toString();
		this.selectMultiple.show = false;
		console.log("confirm:", this.bind.teamNameList);
	},
	changeMultiple(e) {
		console.log(e);
	},
	init() {
		console.log("数据:", this.user);
		Object.assign(this.bind, this.user);
		this.bind.factoryName = this.user.deptName;
		this.bind.factoryId = this.user.deptId;
		if (this.bind.factoryId) {
			this.loadTeamList(this.bind.factoryId, false);
		}
		// TODO 初始化重新绑定分厂班组的列表信息
		BaseApi.getFactoryList().then(res => {
			  if (!res || !res.data) {
				  return;
			  }
			  let result = res.data.map((item) => {
				return {
				  label: item.deptName,
				  id: item.deptId,
				};
			  });
			  this.factoryList = [];
			  this.factoryList.push(result);
		});
	},
    confirm () {
		// TODO 确定绑定成功之后再关闭窗口
		if (!this.bind.factoryId) {
			this.$refs.uToast.error(`分厂未选择，不能绑定`);
			return;
		}
		if (!this.bind.teamId) {
			this.$refs.uToast.error(`班组未选择，不能绑定`);
			return;
		}
		BaseApi.updateUserInfo({
			factoryId: this.bind.factoryId,
			teamId: this.bind.teamId,
		}).then(res => {
			this.$store.dispatch('InfoRefresh').then(res => {
				console.log("刷新获取最新用户:", res);
				this.$emit('refresh', res);
			});
		});
		this.$emit('close');
    },
	navigateTo (url) {
	  uni.navigateTo({ url: url })
	},
    cancel () {
      this.$emit('close')
    },
	factoryConfirm(e) {
		console.log("分厂确认:", e);
		// TODO e.value[0] = 选择的对象
		this.factoryShow = false;
		this.bind.factoryId = e.value[0].id;
		this.bind.factoryName = e.value[0].label;
		this.loadTeamList(this.bind.factoryId, true);
	},
	loadTeamList(factoryId, isReset) {
		BaseApi.getTeamList({ factoryId}).then(res => {
			if (!res || !res.data) {
			  return;
			}
			let result = res.data.map((item) => {
				return {
				  label: item.deptName,
				  id: item.deptId,
				};
			});
			this.teamList = [];
			this.teamList.push(result);
			if (isReset) {
				this.bind.teamId = null;
				this.bind.teamName = null;
			}
			// 多选框
			let result2 = res.data.map((item) => {
				return {
				  label: item.deptName,
				  value: item.deptName,
				};
			});
			this.selectMultiple.columns = result2;
			console.log("多选：", this.selectMultiple.columns);
		});
	},
	teamConfirm(e) {
		console.log("班组确认:", e);
		// TODO e.value[0] = 选择的对象
		this.teamShow = false;
		this.bind.teamId = e.value[0].id;
		this.bind.teamName = e.value[0].label;
	},
  }
}
</script>

<style lang="scss" scoped>
.cell-page {
	padding-bottom: 20px;
}

.cell-box {
	&__title {
		font-size: 14px;
		color: rgb(143, 156, 162);
		margin: 20px 0px 0px 15px;
	}

	&__block {
		// background-color: #fff;
		margin-top: 20px;
	}
}

.u-page {
	padding: 0;

	&__item {

		&__title {
			color: $u-tips-color;
			background-color: $u-bg-color;
			padding: 15px;
			font-size: 15px;

			&__slot-title {
				color: $u-primary;
				font-size: 14px;
			}
		}
	}
}

.u-slot-title {
	@include flex;
	flex-direction: row;
	align-items: center;
}

.u-cell-text {
	font-size: 15px;
	line-height: 22px;
	color: #303133;
	margin-right: 5px;
}

.u-slot-value {
	line-height: 17px;
	text-align: center;
	font-size: 10px;
	padding: 0 5px;
	height: 17px;
	color: #FFFFFF;
	border-radius: 100px;
	background-color: #f56c6c;
}
</style>